<template>
	<div class="case-details">
		<div class="case-intro" v-html="viewModel.editor"></div>
		<div class="case-carousel" v-if="viewModel.imageList&&viewModel.imageList.length!=0">
			<el-carousel style="background-color: #ffffff;" :interval="5000" arrow="always" :autoplay="false" height="36vw">
				<el-carousel-item class="case-item" v-for="(cItem,cIndex) in viewModel.imageList" :key="cIndex">
					<el-image class="case-cimg" :src="$ala.urlImage(cItem)" fit="contain"></el-image>
				</el-carousel-item>
			</el-carousel>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				viewModel: {}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				document.body.scrollTop = document.documentElement.scrollTop = 0
				this.viewModel = await this.$ala.httpGet('Api/LightApp/getsingle', {
					id: this.$route.query.id,
					tableName: this.$route.query.tableName
				})
			}
		}
	}
</script>
<style lang="scss">
	.case-details {
		width: 92vw;
		margin: auto;
		margin-bottom: 3vw;

		.wscnph {
			width: 100%;
		}

		p {
			font-size: 0.9vw;
			color: rgba(0, 0, 0, 0.75);
			line-height: 1.7;
		}

		.case-carousel {
			width: 92vw;
			margin: auto;
			padding: 0 4.2vw;
			background-color: rgba(0, 0, 0, 0.05);
			margin: 4vw 0;

			.case-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}

			.case-cimg {
				width: 75vw;

				img {
					display: block;
				}
			}

			.el-carousel__arrow {
				width: 6vw;
				height: 6vw;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				background-color: transparent;

				i {
					color: rgba(#d91517, 0.5);
					font-size: 5vw;
				}
			}

			.el-carousel__arrow--left {
				left: -0.8vw;
			}

			.el-carousel__arrow--right {
				right: -0.8vw;
			}

			.el-carousel__indicators--horizontal {
				display: none;
			}
		}
	}
</style>